<!--
 * @Author: MrDotYan 2564217790@qq.com
 * @Date: 2024-09-12 15:15:15
 * @LastEditors: MrDotYan 2564217790@qq.com
 * @LastEditTime: 2024-09-13 21:22:02
 * @FilePath: /webServerAdmin/src/views/system/attachments/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-box">
    <ProTable ref="proTableRef" :request-api="fetchFileList" :columns="columns"></ProTable>
  </div>
</template>

<script lang="tsx" setup>
import ProTable from "@/components/ProTable/index.vue";
import { fetchFileList, removeFile } from "@/api/modules/files";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { useFile, useFileType, FileType } from "@/hooks/useFile";
import { FileSchema } from "@/schema";
import { ResultEnum } from "@/enums/httpEnum";
import { ElMessageBox, ElNotification } from "element-plus";
import { ref } from "vue";

const proTableRef = ref<ProTableInstance>();
function refresh() {
  proTableRef?.value?.getTableList();
}

function remove(row: FileSchema) {
  ElMessageBox.confirm("提示", { type: "error", message: "是否删除当前数据？" })
    .then(() => {
      if (row?.id) {
        removeFile({ id: row.id }).then(r => {
          const { code, message } = r;
          if (code == ResultEnum.SUCCESS) {
            ElNotification.success("删除成功！");
            refresh();
          } else {
            ElNotification.error(message);
          }
        });
      }
    })
    .catch(err => {
      console.error(err);
    });
}

const columns: Array<ColumnProps> = [
  { type: "index", label: "序号", fixed: "left", width: 80 },
  { label: "文件名称", prop: "fileName", search: { el: "input" } },
  { label: "文件媒体类型", prop: "mimeType" },
  {
    label: "文件预览",
    prop: "fileUrl",
    render({ row }) {
      if (useFileType(row.mimeType) === FileType.IMAGE) {
        return (
          <el-image
            lazy
            preview-src-list={[useFile(row.fileUrl)]}
            style="width: 48px; height: 48px"
            src={useFile(row.fileUrl)}
            fit="cover"
            z-index={9999}
            preview-teleported
          />
        );
      }

      if (useFileType(row.mimeType) === FileType.DOCUMENT) {
        return (
          <el-link href={useFile(row.fileUrl)} target="_blank">
            下载
          </el-link>
        );
      }

      if (useFileType(row.mimeType) === FileType.VIDEO) {
        return (
          <el-link href={useFile(row.fileUrl)} target="_blank">
            播放
          </el-link>
        );
      }
    }
  },
  { label: "上传者", prop: "createUserName" },
  {
    label: "操作",
    prop: "action",
    render({ row }) {
      return (
        <>
          <el-button link v-copy={useFile(row.fileUrl)}>
            复制路径
          </el-button>
          <el-button v-auth={"System.Attachments.RemoveAttachments"} link type="danger" onClick={() => remove(row)}>
            删除
          </el-button>
        </>
      );
    }
  }
];
</script>
